<template>
  <el-container>
    <el-header><div>
      <img src="../assets/下载.png" alt="">
      <span>闪进库存管理系统</span>
    </div>
      <el-dropdown>
  <span class="el-dropdown-link">
    {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="dialogVisible=true">修改密码</el-dropdown-item>
        <el-dropdown-item @click.native = "logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b" router :default-active="active">
          <el-menu-item index="/base" @click="saveActive('/base')">
            <i class="el-icon-menu"></i>
            <span slot="title">物品基础库</span>
          </el-menu-item>
        </el-menu>
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b" router :default-active="active">
          <el-menu-item index="/list" @click="saveActive('/list')">
            <i class="el-icon-menu"></i>
            <span slot="title">库存列表</span>
          </el-menu-item>
        </el-menu>
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b" router :default-active="active">
          <el-menu-item index="/category" @click="saveActive('/category')">
            <i class="el-icon-menu"></i>
            <span slot="title">单品库存列表</span>
          </el-menu-item>
        </el-menu>
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b" router :default-active="active">
          <el-menu-item index="/inbound" @click="saveActive('/inbound')">
            <i class="el-icon-menu"></i>
            <span slot="title">入库清单</span>
          </el-menu-item>
        </el-menu>
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b" router :default-active="active">
          <el-menu-item index="/dictionary" @click="saveActive('/dictionary')">
            <i class="el-icon-menu"></i>
            <span slot="title">字典表维护</span>
          </el-menu-item>
        </el-menu>
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b" router :default-active="active">
          <el-menu-item index="/member" @click="saveActive('/member')">
            <i class="el-icon-menu"></i>
            <span slot="title">相关人员</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
<!--        修改密码对话框-->
        <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="原密码" prop="oldPass">
            <el-input v-model="ruleForm.oldPass" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data() {
    var checkOldPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('原密码不能为空'))
      }
      callback();
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6 || value.length > 15) {
        callback(new Error('密码长度在6到15个字符之间'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        oldPass: '',
        id: window.sessionStorage.getItem('id')
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        oldPass: [
          { validator: checkOldPass, trigger: 'blur' }
        ]
      },
      username: window.sessionStorage.getItem('username'),
      dialogVisible: false,
      active: ''
    }
  },
  methods: {
    saveActive(path) {
      window.sessionStorage.setItem('active', path);
      this.active = path;
    },
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const {data: res} = await this.$http.post('changePass', this.ruleForm);
          if (res.meta.status !== 200) {
            return this.$message.error(res.meta.msg)
          }
          this.$message.success(res.meta.msg)
          this.dialogVisible = false;
          this.$refs[formName].resetFields();
        } else {
          console.log('error submit!!')
          return false
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped lang="less">
.el-header{
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  >div{
    display: flex;
    align-items: center;
    span{
      margin-left: 15px;
    }
  }
}
  .el-aside{
    background-color: #333744;
  }
  .el-main{
    background-color: #eaedf1;
  }
  .el-container{
    height: 100%;
  }
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
